<template>
  <div @click="visible = true">
    <slot>
      <a-input v-model="inputValue" placeholder="请选择工艺路线" />
    </slot>
  </div>
  <a-modal title="请选择工艺路线" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <div style="height: 20px" />
    <tableTurn :tableData="getDemandAll" :args="args" ref="tableRef">
      <a-table-column
        title="工艺路线编码"
        data-index="routerCode"
        align="center"
      />
      <a-table-column
        title="工艺路线名称"
        data-index="routerName"
        align="center"
      />
      <a-table-column
        title="生产方式"
        data-index="routerInstructions"
        align="center"
      />
      <a-table-column :width="100" title="状态" align="center">
        <template #cell="{ record }">
          <a-typography-text type="success" v-if="record.state === 1">
            启用
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.state === 2">
            停用
          </a-typography-text>
        </template>
      </a-table-column>
      <a-table-column :width="100" fixed="right" title="操作" align="center">
        <template #cell="{ record }">
          <a-space>
            <a-button
              type="text"
              v-if="record.state === 1"
              @click="choice(record)"
            >
              选择
            </a-button>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick, useSlots } from 'vue';
  import { GetProcessRoutePage } from '@/api/FactoryModeling';
  import { TProcessRoute } from '@/api/FactoryModeling/type';

  const args = reactive({
    stripe: false,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });
  let slots = useSlots();
  const props = withDefaults(
    //参数说明
    defineProps<{
      inputValue?: string;
    }>(),
    {}
  );

  let searchForm = reactive<any>({});
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetProcessRoutePage({ ...page, ...searchForm });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let visible = ref(false);

  let emit = defineEmits(['choice']);
  let choice = async (item: TProcessRoute) => {
    emit('choice', item);
    visible.value = false;
  };
</script>

<style scoped></style>
